<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单词交互测试x3u3</title>
<style>
    body, html {
        height: 100%;
        margin: 0;
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #content {
        text-align: center;
        width: 100%;
    }
    #word {
        font-family: Arial-Black, sans-serif;
        font-size: 36px;
        color: blue;
        margin-top: 20px;
    }
    .option {
        margin: 5px;
        padding: 10px;
        border: 2px solid #007BFF;
        border-radius: 5px;
        color: black;
        background-color: white;
        font-size: 16px;
        cursor: pointer;
        width: 300px;
        display: inline-block;
        transition: background-color 0.3s ease;
    }
    .option:hover {
        background-color: #f0f0f0;
    }
    #optionsContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #progressBar {
        width: 90%;
        background-color: #ddd;
        margin: 20px 0;
    }
    #progress {
        height: 20px;
        background-color: #4CAF50;
        width: 0%;
    }
    #stats {
        margin-top: 10px;
        font-size: 18px;
        color: #333;
    }
</style>
<script>
const words = {
    "breadth": "n. 宽度；广泛",
    "convince": "vt. 使确信，使相信；说服，劝说",
    "voyage": "n. 航海，航行，航天；vi. 航行，远行",
    "fleet": "n. 舰队；捕鱼船队；车队",
    "navigate": "vt. 航行；导航；vi. 导航",
    "on behalf of": "代表（或代替）；为帮助；为了",
    "load": "vt. & vi. 装上，装入；n. 负载；承载量；大量",
    "compass": "n. 罗盘，指南针；圆规",
    "log": "n. 航海日志，正式记录；原木；vi. & vt. 伐木",
    "strengthen": "vt. & vi. 加强，增强",
    "harmonious": "adj. 友好和睦的；协调的，和谐的",
    "dismiss": "vt. 不予考虑，对···不屑一提；去除，摒除；解雇；解散",
    "proof": "n. 证据，证明",
    "acknowledge": "vt. 承认（权威、地位）；承认（属实）；（公开）感谢",
    "influential": "adj. 有很大影响力的，有支配力的",
    "insist": "vi. & vt. 坚决要求，坚持；坚持说",
    "route": "n. 路线，路途；途径，渠道",
    "financial": "adj. 财政的，金融的，财务的",
    "depart": "vi. & vt. 离开，起程",
    "shortage": "n. 不足，短缺",
    "leak": "vi. 漏，渗漏；渗入；vt. 漏，渗漏；泄露；n. 漏洞",
    "panic": "n. 惊恐，恐慌；vi. & vt. （使）惊慌，（使）惊慌失措",
    "regardless": "adv. 不顾，不加理会",
    "shore": "n. 岸，滨",
    "subsequent": "adj. 随后的，后来的",
    "captain": "n. 船长；机长；上校；队长",
    "allow for": "使成为可能；考虑到，把…计算在内",
    "kingdom": "n. 王国；管辖范围",
    "astonish": "vt. 使十分惊讶，使吃惊",
    "royal": "adj. 盛大的，庄严的；皇家的，王室的",
    "tomb": "n. 坟墓",
    "literary": "adj. 文学的，文学上的；爱好文学的",
    "extensively": "adv. 广阔地；广泛地",
    "facilitate": "vt. 使便利，促进",
    "sort out": "理顺，整理；把…安排好",
    "available": "adj. 可获得的，可找到的；有空的",
    "prison": "n. 监狱",
    "minister": "n. 大臣，部长",
    "exceptional": "adj. 杰出的，优秀的；异常的，罕见的",
    "phrase": "n. 成语，习语；短语，词组",
    "format": "n. 总体安排，设计；版式",
    "shelf": "n. （pl. shelves /ʃelvz/）（书架等的）架子，搁板",
    "adopt": "vt. 采用，采取；表决采纳；领养，收养；vi. 领养，收养",
    "comparison": "n. 对比；比较",
    "pack": "vt. & vi. 塞进，挤进；装（箱），收拾；打包；包装；n. 包，包裹；小盒，小包",
    "contrary": "adj. 相反的，相对立的；截然不同的",
    "hell": "n. 地狱；苦难的经历，悲惨的境况",
    "aboard": "prep. & adv. 在（车、船、飞机等）上，上（车、船、飞机等）",
    "rub": "vt. & vi. 擦，磨，搓；（使）相互摩擦",
    "washroom": "n. 洗手间，厕所",
    "uniform": "n. 制服；队服；adj. 一致的，统一的",
    "violently": "adv. 猛烈地，厉害地；强烈地，激烈地；凶狠地",
    "eagle": "n. 雕",
    "dive": "vi. 俯冲；跳水；潜水；n. 冲，扑，俯冲；潜水；跳水",
    "thunder": "vi. 轰隆隆地响；打雷；n. 雷，雷声",
    "freeze": "vi. & vt. (froze, frozen) 突然停止，呆住；结冰；冻僵",
    "deck": "n. 甲板，舱面",
    "meanwhile": "adv. 同时；其间；对比之下",
    "drag": "vt. 拖，拉；缓慢而费力地移动",
    "chaos": "n. 混乱，杂乱",
    "navy": "n. 海军，海军部队",
    "bleed": "vi. (bled, bled) 失血，流血",
    "hatch": "vt. 密谋，策划；使孵出；vi. 孵化；孵出",
    "plot": "n. 阴谋；故事情节；vi. & vt. 密谋",
    "infamy": "n. 臭名昭著，声名狼藉；恶行，罪恶",
    "sink": "vi. & vt. (sank, sunk) 下沉，沉没；坐下；降低",
    "memorial": "n. 纪念碑（或像等）；纪念物",
    "pray": "vi. & vt. 企盼，祈求；祈祷，祷告",
    "episode": "n. 一段经历，片段；一集",
    "textile": "n. 纺织品；(textiles) 纺织业",
    "reform": "vt. 改进，改良，改革；n. 改革，改良",
    "output": "n. 产量，输出量",
    "cloth": "n. 织物，布料",
    "shift": "n. 改变，转移；轮班；vi. & vt. （使）移动，（使）转移；改变",
    "cottage": "n. 小屋，村舍",
    "cottage industry": "家庭手工业"
    // 这是你刚才要加的例子
    // Your words dictionary here
};

let keys = Object.keys(words);
let totalWords = keys.length;
let correctCount = 0;
let wordsAnswered = 0;

function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

shuffle(keys);

function generateQuestion() {
    if (keys.length === 0) {
        document.getElementById('word').textContent = "Quiz Completed!";
        document.getElementById('optionsContainer').style.display = "none";
        return;
    }
    const questionIndex = keys.pop();
    const questionWord = questionIndex;
    const correctAnswer = words[questionWord];
    let options = [];
    let tempKeys = Object.keys(words).filter(key => key !== questionWord);
    shuffle(tempKeys);
    tempKeys = tempKeys.slice(0, 3);
    options = tempKeys.map(key => words[key]);
    options.push(correctAnswer);
    shuffle(options);
    document.getElementById('word').textContent = questionWord.replace('_', ' ');
    document.getElementById('optionA').textContent = 'A: ' + options[0];
    document.getElementById('optionB').textContent = 'B: ' + options[1];
    document.getElementById('optionC').textContent = 'C: ' + options[2];
    document.getElementById('optionD').textContent = 'D: ' + options[3];
    document.getElementById('correct').value = options.indexOf(correctAnswer);
    updateProgress();
}

function checkAnswer(selected) {
    const correct = document.getElementById('correct').value;
    const selectedButton = document.querySelectorAll('.option')[selected];
    if (selected === parseInt(correct)) {
        selectedButton.style.backgroundColor = 'lightgreen';
        document.getElementById('match').play();
        correctCount++;
    } else {
        selectedButton.style.backgroundColor = 'lightcoral';
        document.getElementById('unmatch').play();
    }
    setTimeout(() => {
        selectedButton.style.backgroundColor = 'white';
        wordsAnswered++;
        updateStats();
        generateQuestion();
    }, 1000);
}

function updateProgress() {
    const progressPercent = ((totalWords - keys.length) / totalWords) * 100;
    document.getElementById('progress').style.width = `${progressPercent}%`;
}

function updateStats() {
    const correctRate = ((correctCount / wordsAnswered) * 100).toFixed(1);
    document.getElementById('stats').textContent = `正确个数: ${correctCount} / ${wordsAnswered} (${correctRate}%)`;
}

document.addEventListener('DOMContentLoaded', generateQuestion);
</script>
</head>
<body>
<div id="content">
    <h1>单词交互测试x3u3</h1>
    <p id="word"></p>
    <div id="optionsContainer">
        <button id="optionA" class="option" onclick="checkAnswer(0)"></button>
        <button id="optionB" class="option" onclick="checkAnswer(1)"></button>
        <button id="optionC" class="option" onclick="checkAnswer(2)"></button>
        <button id="optionD" class="option" onclick="checkAnswer(3)"></button>
    </div>
    <div id="progressBar">
        <div id="progress"></div>
    </div>
    <div id="stats"></div>
    <input type="hidden" id="correct">
</div>
<audio id="match" src="match.wav"></audio>
<audio id="unmatch" src="unmatch.wav"></audio>
</body>
</html>
